﻿@page "/selects"
@inject DialogService Dialog

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <p>@((MarkupString)Localizer["P1"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Success" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Danger" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Warning" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Info" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Secondary" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Dark" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Disable">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Primary" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Success" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Danger" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Warning" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Info" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Secondary" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Dark" Items="Items" IsDisabled="true"></Select>
        </div>
    </div>
    <p class="mt-3">@((MarkupString)Localizer["P2"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items4" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Binding">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput readonly @bind-Value="Model.Name" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="Cascading">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick" />
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items2" />
        </div>
        <div class="col-12">
            <Button Text="@Localizer["ButtonText1"]" OnClickWithoutRender="OnShowDialog" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="ClientValidation">
    <ValidateForm Model="BindModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <Select @bind-Value="BindModel.Name">
                    <Options>
                        <SelectOption Text="@Localizer["Option1"]" Value="" />
                        <SelectOption Text="@Localizer["Option2"]" Value="1" />
                        <SelectOption Text="@Localizer["Option3"]" Value="2" />
                        <SelectOption Text="@Localizer["Option4"]" Value="3" />
                    </Options>
                </Select>
            </div>
            <div class="col-12 col-sm-6 align-self-end">
                <Button ButtonType="ButtonType.Submit">@Localizer["ButtonText2"]</Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Group">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Primary" Items="GroupItems">
            </Select>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="Guid">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="GuidItems" @bind-Value="CurrentGuid" />
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@CurrentGuid</div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="DispalyLabel">
    <p>@((MarkupString)Localizer["P3"].Value)</p>
    <Divider Text="@Localizer["Divider1"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="Model">
        <div class="row g-3">
            <div class="col-12">
                <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="@Localizer["Divider2"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <div class="row g-3">
        <div class="col-12">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" />
        </div>
    </div>
    <Divider Text="@Localizer["Divider3"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <div class="row g-3">
        <div class="col-12">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" DisplayText="@Localizer["SelectText"]" ShowLabel="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="Static">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string">
                <Options>
                    <SelectOption Text="@Localizer["Option1"]" Value="1" />
                    <SelectOption Text="@Localizer["Option2"]" Value="2" Active="true" />
                    <SelectOption Text="@Localizer["Option3"]" Value="3" />
                </Options>
            </Select>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]" Name="Enum">
    <p>@((MarkupString)Localizer["P4"].Value)</p>
    <p>@((MarkupString)Localizer["P5"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem1" PlaceHolder="@Localizer["PlaceHolder"]" ShowLabel="true" DisplayText="@Localizer["SelectText1"]">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem1" ShowLabel="true" DisplayText="@Localizer["SelectText1"]">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem" ShowLabel="true" DisplayText="@Localizer["SelectText2"]">
            </Select>
        </div>
        <div class="col-12 col-sm-6 align-self-end">
            <div class="form-control">@SelectedEnumItem</div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block11Intro"]" Name="Nullable">
    <p>@((MarkupString)Localizer["P6"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="NullableIntItems" @bind-Value="SelectedIntItem">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@GetSelectedIntItemString()</div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block12Title"]" Introduction="@Localizer["Block12Intro"]" Name="NullableBoolean">
    <p>@((MarkupString)Localizer["P7"].Value)</p>
    <p>@((MarkupString)Localizer["P8"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="NullableBoolItems" @bind-Value="SelectedBoolItem">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@GetSelectedBoolItemString()</div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block13Title"]" Introduction="@Localizer["Block13Intro"]" Name="CunstomTemplate">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items">
                <ItemTemplate>
                    <div class="dropdown-item-demo">
                        <i class="fa fa-fa"></i>
                        <span>@context.Text</span>
                        <i class="fa fa-star"></i>
                    </div>
                </ItemTemplate>
            </Select>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["BlockShowSearchTitle"]" Introduction="@Localizer["BlockShowSearchIntro"]" Name="ShowSearch">
    <p>@((MarkupString)Localizer["AutoClearSearchTextIntro"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items" ShowSearch="true" />
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="StringItems" ShowSearch="true" AutoClearSearchText="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block15Title"]" Introduction="@Localizer["Block15Intro"]" Name="ConfirmSelect">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items" OnBeforeSelectedItemChange="@OnBeforeSelectedItemChange"
                    SwalTitle="@Localizer["SwalTitle"]" SwalContent="@Localizer["SwalContent"]" SwalFooter="@Localizer["SwalFooter"]" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["TimezoneTitle"]" Introduction="@Localizer["TimezoneIntro"]" Name="Timezone">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Value="@TimezoneId" Items="TimezoneItems" OnValueChanged="OnTimezoneValueChanged" />
        </div>
        <div class="col-12 col-sm-6">
            <Display TValue="TimeSpan" Value="@TimezoneValue" />
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
